<template>
	<div style="position: relative">
		<div v-if="type === '2'" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }" class="verify-img-out">
			<div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
				<img :src="'data:image/png;base64,' + backImgBase" alt="" style="width: 100%; height: 100%; display: block" />
				<div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh"></i></div>
				<transition name="tips">
					<span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">{{ tipWords }}</span>
				</transition>
			</div>
		</div>
		<!-- 公共部分 -->
		<div :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }" class="verify-bar-area">
			<span class="verify-msg" v-text="text"></span>
			<div
				:style="{
					width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
					height: barSize.height,
					'border-color': leftBarBorderColor,
					transaction: transitionWidth,
				}"
				class="verify-left-bar"
			>
				<span class="verify-msg" v-text="finishText"></span>
				<div
					:style="{
						width: barSize.height,
						height: barSize.height,
						'background-color': moveBlockBackgroundColor,
						left: moveBlockLeft,
						transition: transitionLeft,
					}"
					class="verify-move-block"
					@mousedown="start"
					@touchstart="start"
				>
					<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
					<div
						v-if="type === '2'"
						:style="{
							width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
							height: setSize.imgHeight,
							top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
							'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
						}"
						class="verify-sub-block"
					>
						<img
							:src="'data:image/png;base64,' + blockBackImgBase"
							alt=""
							style="width: 100%; height: 100%; display: block; -webkit-user-drag: none"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/babel">
/**
 * VerifySlide
 * @description 滑块
 * */
import { aesEncrypt } from '../utils/ase';
import { resetSize } from '../utils/util';
import { reqCheck, reqGet } from '../api/index';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
export default {
	name: 'VerifySlide',
	props: {
		captchaType: {
			type: String,
		},
		type: {
			type: String,
			default: '1',
		},
		//弹出式pop，固定fixed
		mode: {
			type: String,
			default: 'fixed',
		},
		vSpace: {
			type: Number,
			default: 5,
		},
		explain: {
			type: String,
			default: '向右滑动完成验证',
		},
		imgSize: {
			type: Object,
			default() {
				return {
					width: '310px',
					height: '155px',
				};
			},
		},
		blockSize: {
			type: Object,
			default() {
				return {
					width: '50px',
					height: '50px',
				};
			},
		},
		barSize: {
			type: Object,
			default() {
				return {
					width: '310px',
					height: '40px',
				};
			},
		},
	},
	setup(props) {
		const { mode, captchaType, type, blockSize, explain } = toRefs(props);
		const { proxy } = getCurrentInstance();
		let secretKey = ref(''), //后端返回的ase加密秘钥
			passFlag = ref(''), //是否通过的标识
			backImgBase = ref(''), //验证码背景图片
			blockBackImgBase = ref(''), //验证滑块的背景图片
			backToken = ref(''), //后端返回的唯一token值
			startMoveTime = ref(''), //移动开始的时间
			endMovetime = ref(''), //移动结束的时间
			tipsBackColor = ref(''), //提示词的背景颜色
			tipWords = ref(''),
			text = ref(''),
			finishText = ref(''),
			setSize = reactive({
				imgHeight: 0,
				imgWidth: 0,
				barHeight: 0,
				barWidth: 0,
			}),
			top = ref(0),
			left = ref(0),
			moveBlockLeft = ref(undefined),
			leftBarWidth = ref(undefined),
			// 移动中样式
			moveBlockBackgroundColor = ref(undefined),
			leftBarBorderColor = ref('#ddd'),
			iconColor = ref(undefined),
			iconClass = ref('icon-right'),
			status = ref(false), //鼠标状态
			isEnd = ref(false), //是够验证完成
			showRefresh = ref(true),
			transitionLeft = ref(''),
			transitionWidth = ref(''),
			startLeft = ref(0);

		const barArea = computed(() => {
			return proxy.$el.querySelector('.verify-bar-area');
		});

		function init() {
			text.value = explain.value;
			getPictrue();
			nextTick(() => {
				let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
				setSize.imgHeight = imgHeight;
				setSize.imgWidth = imgWidth;
				setSize.barHeight = barHeight;
				setSize.barWidth = barWidth;
				proxy.$parent.$emit('ready', proxy);
			});

			window.removeEventListener('touchmove', function (e) {
				move(e);
			});
			window.removeEventListener('mousemove', function (e) {
				move(e);
			});

			//鼠标松开
			window.removeEventListener('touchend', function () {
				end();
			});
			window.removeEventListener('mouseup', function () {
				end();
			});

			window.addEventListener('touchmove', function (e) {
				move(e);
			});
			window.addEventListener('mousemove', function (e) {
				move(e);
			});

			//鼠标松开
			window.addEventListener('touchend', function () {
				end();
			});
			window.addEventListener('mouseup', function () {
				end();
			});
		}

		watch(type, () => {
			init();
		});
		onMounted(() => {
			// 禁止拖拽
			init();
			proxy.$el.onselectstart = function () {
				return false;
			};
		});

		//鼠标按下
		function start(e) {
			e = e || window.event;
			let x = null;
			if (!e.touches) {
				//兼容PC端
				x = e.clientX;
			} else {
				//兼容移动端
				x = e.touches[0].pageX;
			}
			startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
			startMoveTime.value = +new Date(); //开始滑动的时间
			if (isEnd.value == false) {
				text.value = '';
				moveBlockBackgroundColor.value = '#337ab7';
				leftBarBorderColor.value = '#337AB7';
				iconColor.value = '#fff';
				e.stopPropagation();
				status.value = true;
			}
		}

		//鼠标移动
		function move(e) {
			e = e || window.event;
			if (status.value && isEnd.value == false) {
				let x = null;
				if (!e.touches) {
					//兼容PC端
					x = e.clientX;
				} else {
					//兼容移动端
					x = e.touches[0].pageX;
				}
				var bar_area_left = barArea.value.getBoundingClientRect().left;
				var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
				if (move_block_left >= barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2) {
					move_block_left = barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2;
				}
				if (move_block_left <= 0) {
					move_block_left = parseInt(parseInt(blockSize.value.width) / 2);
				}
				//拖动后小方块的left值
				moveBlockLeft.value = move_block_left - startLeft.value + 'px';
				leftBarWidth.value = move_block_left - startLeft.value + 'px';
			}
		}

		//鼠标松开
		function end() {
			endMovetime.value = +new Date();
			//判断是否重合
			if (status.value && isEnd.value == false) {
				var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''));
				moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth);
				let data = {
					captchaType: captchaType.value,
					pointJson: secretKey.value
						? aesEncrypt(
								JSON.stringify({
									x: moveLeftDistance,
									y: 5.0,
								}),
								secretKey.value
								// eslint-disable-next-line no-mixed-spaces-and-tabs
						  )
						: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
					token: backToken.value,
				};
				reqCheck(data).then((response) => {
					let res = response.data;
					if (res.repCode == '0000') {
						moveBlockBackgroundColor.value = '#5cb85c';
						leftBarBorderColor.value = '#5cb85c';
						iconColor.value = '#fff';
						iconClass.value = 'icon-check';
						showRefresh.value = false;
						isEnd.value = true;
						if (mode.value == 'pop') {
							setTimeout(() => {
								proxy.$parent.clickShow = false;
								refresh();
							}, 1500);
						}
						passFlag.value = true;
						tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s验证成功`;
						var captchaVerification = secretKey.value
							? aesEncrypt(
									backToken.value +
										'---' +
										JSON.stringify({
											x: moveLeftDistance,
											y: 5.0,
										}),
									secretKey.value
									// eslint-disable-next-line no-mixed-spaces-and-tabs
							  )
							: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
						setTimeout(() => {
							tipWords.value = '';
							proxy.$parent.$parent.closeBox();
							proxy.$parent.$parent.$emit('success', { captchaVerification });
						}, 1000);
					} else {
						moveBlockBackgroundColor.value = '#d9534f';
						leftBarBorderColor.value = '#d9534f';
						iconColor.value = '#fff';
						iconClass.value = 'icon-close';
						passFlag.value = false;
						setTimeout(function () {
							refresh();
						}, 1000);
						proxy.$parent.$emit('error', proxy);
						tipWords.value = '验证失败';
						setTimeout(() => {
							tipWords.value = '';
						}, 1000);
					}
				});
				status.value = false;
			}
		}

		const refresh = () => {
			showRefresh.value = true;
			finishText.value = '';

			transitionLeft.value = 'left .3s';
			moveBlockLeft.value = 0;

			leftBarWidth.value = undefined;
			transitionWidth.value = 'width .3s';

			leftBarBorderColor.value = '#ddd';
			moveBlockBackgroundColor.value = '#fff';
			iconColor.value = '#000';
			iconClass.value = 'icon-right';
			isEnd.value = false;

			getPictrue();
			setTimeout(() => {
				transitionWidth.value = '';
				transitionLeft.value = '';
				text.value = explain.value;
			}, 300);
		};

		// 请求背景图片和验证图片
		function getPictrue() {
			let data = {
				captchaType: captchaType.value,
			};
			reqGet(data).then((response) => {
				let res = response.data;
				if (res.repCode == '0000') {
					backImgBase.value = res.repData.originalImageBase64;
					blockBackImgBase.value = res.repData.jigsawImageBase64;
					backToken.value = res.repData.token;
					secretKey.value = res.repData.secretKey;
				} else {
					tipWords.value = res.repMsg;
				}
			});
		}

		return {
			secretKey, //后端返回的ase加密秘钥
			passFlag, //是否通过的标识
			backImgBase, //验证码背景图片
			blockBackImgBase, //验证滑块的背景图片
			backToken, //后端返回的唯一token值
			startMoveTime, //移动开始的时间
			endMovetime, //移动结束的时间
			tipsBackColor, //提示词的背景颜色
			tipWords,
			text,
			finishText,
			setSize,
			top,
			left,
			moveBlockLeft,
			leftBarWidth,
			// 移动中样式
			moveBlockBackgroundColor,
			leftBarBorderColor,
			iconColor,
			iconClass,
			status, //鼠标状态
			isEnd, //是够验证完成
			showRefresh,
			transitionLeft,
			transitionWidth,
			barArea,
			refresh,
			start,
		};
	},
};
</script>
